<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<meta name="format-detection" content="telephone=no" />
<title>无标题文档</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$('document').ready(function(){
	
	var backimage = { 'url':'images/tmp/test1.jpg', 'img': null };
	var canvas = {'temp': null, 'draw': null}; 
	var mouseDown = false;	
	
	// canvas 合成	
	function recompositeCanvases() {
	
		var main = document.getElementById('main');
		var tempctx = canvas.temp.getContext('2d');
		var mainctx = main.getContext('2d');
		
		// clear the temp
		canvas.temp.width = canvas.temp.width;
		
		// 把 canvas.draw 覆蓋到 drawImage 上
		tempctx.drawImage(canvas.draw, 0, 0);
		
		// 以 source-atop 的方式把 backimage 畫到 tempctx 上
		tempctx.globalCompositeOperation = 'source-atop';
		tempctx.drawImage(backimage.img, 0, 0);
		
		// mainctx => 灰色前景 (還沒有刮掉的地方)
		mainctx.fillStyle = "#888";
		mainctx.fillRect(0, 0, backimage.img.width, backimage.img.height);
		
		// 最後把 canvas.temp 覆蓋到 mainctx 上
		mainctx.drawImage(canvas.temp, 0, 0);
	}
	
	//画线
	function scratch(canv, x, y, fresh) {
		
		var ctx = canv.getContext('2d');		
		//线条宽度
		ctx.lineWidth = 10;
		ctx.lineCap = ctx.lineJoin = 'round';
		
		if (fresh) {
			ctx.beginPath();
			// 為了模擬滑動，所以在 x 加上 0.01，不然點一下不會產生反應
			ctx.moveTo(x+0.01, y);
		}
		ctx.lineTo(x, y);
		ctx.stroke();
	}

	function setupCanvases() {
		var c = document.getElementById('main');
		
		// 取得圖片長寬
		///c.width = backimage.img.width;
		//c.height = backimage.img.height;
		c.width=160;
		c.height=40;

		canvas.temp = document.createElement('canvas');
		canvas.draw = document.createElement('canvas');
		
		canvas.temp.width = canvas.draw.width = c.width;
		canvas.temp.height = canvas.draw.height = c.height;

		recompositeCanvases();
	 
		function mousedown_handler(e) {
			var local = getLocalCoords(c, e);
			mouseDown = true;

			scratch(canvas.draw, local.x, local.y, true);
			recompositeCanvases();

			if (e.cancelable) { e.preventDefault(); } 
			return false;
		};
	 
		function mousemove_handler(e) {
			if (!mouseDown) { return true; }

			var local = getLocalCoords(c, e);

			scratch(canvas.draw, local.x, local.y, false);
			recompositeCanvases();

			if (e.cancelable) { e.preventDefault(); } 
			return false;
		};

		function mouseup_handler(e) {
			if (mouseDown) {
				mouseDown = false;
				if (e.cancelable) { e.preventDefault(); } 
				return false;
			}

			return true;
		};

		// mouse handlers
		c.addEventListener('mousedown', mousedown_handler, false);
		c.addEventListener('touchstart', mousedown_handler, false);

		window.addEventListener('mousemove', mousemove_handler, false);
		window.addEventListener('touchmove', mousemove_handler, false);

		window.addEventListener('mouseup', mouseup_handler, false);
		window.addEventListener('touchend', mouseup_handler, false);
	}

	// 取得座標
	function getLocalCoords(elem, ev) {
		var ox = 0, oy = 0;
		var first;
		var pageX, pageY;
	 
		while (elem != null) {
			ox += elem.offsetLeft;
			oy += elem.offsetTop;
			elem = elem.offsetParent;
		}

		if (ev.hasOwnProperty('changedTouches')) {
			first = ev.changedTouches[0];
			pageX = first.pageX;
			pageY = first.pageY;
		} else {
			pageX = ev.pageX;
			pageY = ev.pageY;
		}

		return { 'x': pageX - ox, 'y': pageY - oy };
	}

	//动态生成一个img 出來
	backimage.img = document.createElement('img'); 
	backimage.img.addEventListener('load', setupCanvases, false);
	backimage.img.src = backimage.url;

	
	
});
</script>
</head>

<body class="ggk_bg">
	<div class="ggk_box">
    	<div class="ggk_main">
        	<div class="ggk_title cf">
                <a href="#"></a>
            </div>
            <div class="ggk_main_box">
            	<canvas id="main"></canvas>
            </div>
        </div>
        <div class="set_main">
            <div class="set_box">
                <p>一等奖：0101流行馆5000体验券。</p>
                <p>二等奖：0101流行馆5000体验券。</p>
                <p>三等奖：0101流行馆5000体验券。</p>
                <p>四等奖：0101流行馆5000体验券。</p>
            </div>
        </div>
        <div class="event_main">
            <div class="event_box">
                <p class="red">本次活动总共可以刮5次,你已经刮了5次,机会如果没用完重新进入本页面可以再刮!</p>
                <p>亲，请点击进入刮刮奖活动页面，祝您好运哦！</p>
            </div>
        </div>
    </div>
</body>
</html>
